<template>
  <div class="adminHome-container">
    <div class="content">
      <!-- <p class="w-title">管理员首页</p> -->
      <div class="top-wrap">
        <Toptag v-for="(e, i) in data_1" :key="i" :data="e" :index="i" />
      </div>
      <div class="flex-between">
        <div class="w2" style="height: 500px">
          <div class="flex-between">
            <span class="c-title">资源分布概况</span>
            <el-radio-group size="mini" v-model="isXc_2">
              <el-radio-button :label="true">信创</el-radio-button>
              <el-radio-button :label="false">非信创</el-radio-button>
            </el-radio-group>
          </div>
          <div class="charts">
            <ChartPie
              cid="adHomeChart1"
              title="云服务器资源"
              :cdata="isXc_2 ? data_2.ecsRing.xc : data_2.ecsRing.exc"
            />
            <ChartPie
              cid="adHomeChart2"
              title="存储资源"
              :cdata="isXc_2 ? data_2.diskRing.xc : data_2.diskRing.exc"
            />
            <ChartPie
              cid="adHomeChart3"
              title="网络资源"
              :cdata="isXc_2 ? data_2.netRing.xc : data_2.netRing.exc"
            />
            <ChartPie
              cid="adHomeChart4"
              title="数据库资源"
              :cdata="isXc_2 ? data_2.dbRing.xc : data_2.dbRing.exc"
            />
          </div>
        </div>
        <div class="w2" style="height: 500px">
          <div class="box">
            <span class="c-title">费用总览</span>
            <Exspence :cdata="data_3" />
          </div>
          <div class="box">
            <span class="c-title">工单总览</span>
            <div class="flex-between data-box">
              <div class="flex-column">
                <span class="f-16 f-gray">全部工单</span>
                <span class="f-24 blod">{{ data_3.totalWork }}</span>
                <span class="f-gray">个</span>
              </div>
              <div class="flex-column">
                <span class="f-16 f-gray">今日工单</span>
                <span class="f-24 blod">{{ data_3.todayNew }}</span>
                <span class="f-gray">个</span>
              </div>
              <div class="flex-column">
                <span class="f-16 f-gray">今日已办</span>
                <span class="f-24 blod">{{ data_3.todayEnd }}</span>
                <span class="f-gray">个</span>
              </div>
              <div class="flex-column">
                <span class="f-16 f-gray">待办工单</span>
                <span class="f-24 blod">{{ data_3.todoWork }}</span>
                <span class="f-gray">个</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flex-between">
        <PhysicalResource />
        <HashpowerOverview />
      </div>

      <div class="flex-between">
        <div class="w2" style="height: 280px">
          <ChartLine title="采集成功率统计" :cdata="data_4" />
        </div>
        <div class="w2 safety" style="height: 280px">
          <span class="c-title">安全事件</span>
          <div class="s-content">
            <div class="flex-column">
              <i
                v-if="data_5.score >= 80"
                class="el-icon-success"
                style="color: #46cb7c; font-size: 100px"
              ></i>
              <i
                v-else-if="data_5.score >= 60"
                class="el-icon-warning"
                style="color: rgba(245, 154, 35, 0.74901961); font-size: 100px"
              ></i>
              <i
                v-else
                class="el-icon-warning"
                style="color: rgba(217, 0, 27, 0.74509804); font-size: 100px"
              ></i>
              <span
                >安全评分：
                <template v-if="data_5.score >= 80">
                  <span class="f-green f-18">{{ data_5.score }}</span>
                </template>
                <template v-else-if="data_5.score >= 60">
                  <span class="f-yellow f-18">{{ data_5.score }}</span>
                </template>
                <template v-else>
                  <span class="f-red f-18">{{ data_5.score }}</span>
                </template>
                / 100</span
              >
              <span>检查时间：{{ data_5.date }}</span>
            </div>
            <div class="flex-column s-box">
              <span><i class="dot"></i> 严重事件</span>
              <span
                ><span class="num">{{ data_5.eventA }}</span> 件</span
              >
            </div>
            <div class="flex-column s-box yellow">
              <span><i class="dot"></i> 警告事件</span>
              <span
                ><span class="num">{{ data_5.eventB }}</span> 件</span
              >
            </div>
            <div class="flex-column s-box green">
              <span><i class="dot"></i> 一般事件</span>
              <span
                ><span class="num">{{ data_5.eventC }}</span> 件</span
              >
            </div>
          </div>
        </div>
      </div>

      <div class="flex-between">
        <div class="w2">
          <BottomBox :cdata="data_6.cpu" />
        </div>
        <div class="w2">
          <BottomBox :cdata="data_6.disk" />
        </div>
      </div>

      <div class="flex-between">
        <div class="w2">
          <BottomBox :cdata="data_6.net" />
        </div>
        <div class="w2">
          <BottomBox :cdata="data_6.io" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Toptag from "./components/Toptag";
import ChartPie from "./components/ChartPie";
import ChartLine from "./components/ChartLine";
import BottomBox from "./components/BottomBox";
import Exspence from "./components/Exspence";
import PhysicalResource from "./components/PhysicalResource";
import HashpowerOverview from "./components/HashpowerOverview";
import {
  getAdminHomeDataPart1,
  getAdminHomeDataPart2,
  getAdminHomeDataPart3,
  getAdminHomeDataPart4,
  getAdminHomeDataPart5,
} from "@/api/index";

export default {
  name: "AdminHome",

  components: {
    Toptag,
    ChartPie,
    ChartLine,
    BottomBox,
    Exspence,
    PhysicalResource,
    HashpowerOverview,
  },

  data() {
    return {
      data_1: [
        {
          title: "信创云服务器数",
          value: 0,
          num: 0,
          unit: "台",
          img: "/img/adminHome-icon_1.svg",
        },
        {
          title: "信创高性能服务器",
          value: 0,
          num: 0,
          unit: "台",
          img: "/img/adminHome-icon_2.svg",
        },
        {
          title: "信创存储",
          value: 0,
          num: 0,
          unit: "TB",
          img: "/img/adminHome-icon_3.svg",
        },
        {
          title: "信创数据库",
          value: 0,
          num: 0,
          unit: "套",
          img: "/img/adminHome-icon_4.svg",
        },
        {
          title: "信创PaaS容器服务",
          value: 0,
          num: 0,
          unit: "个",
          img: "/img/adminHome-icon_5.svg",
        },
        {
          title: "非信创云服务器数",
          value: 0,
          num: 0,
          unit: "台",
          img: "/img/adminHome-icon_1.svg",
        },
        {
          title: "非信创高性能服务器",
          value: 0,
          num: 0,
          unit: "台",
          img: "/img/adminHome-icon_2.svg",
        },
        {
          title: "非信创存储",
          value: 0,
          num: 0,
          unit: "TB",
          img: "/img/adminHome-icon_3.svg",
        },
        {
          title: "非信创数据库",
          value: 0,
          num: 0,
          unit: "套",
          img: "/img/adminHome-icon_4.svg",
        },
        {
          title: "非信创PaaS容器服务",
          value: 0,
          num: 0,
          unit: "个",
          img: "/img/adminHome-icon_5.svg",
        },
      ],
      isXc_2: false,
      data_2: {
        // 数据库资源
        dbRing: {
          xc: [],
          exc: [],
        },
        // 存储资源
        diskRing: {
          xc: [],
          exc: [],
        },
        // 云服务器资源
        ecsRing: {
          xc: [],
          exc: [],
        },
        // 网络资源
        netRing: {
          xc: [],
          exc: [],
        },
      },
      isXc_7: false,
      data_7: {
        // 计算节点
        computeNode: {
          xc: [],
          exc: [
            {
              key: "浪潮云",
              name: "浪潮云",
              value: 288345,
              GHz: 8338740,
              unit: "台",
            },
            {
              key: "新华三云",
              name: "新华三云",
              value: 288345,
              GHz: 8338740,
              unit: "台",
            },
            {
              key: "曙光云",
              name: "曙光云",
              value: 288345,
              GHz: 8338740,
              unit: "台",
            },
          ],
        },
        // 存储节点
        storeNode: {
          xc: [],
          exc: [
            {
              key: "浪潮云",
              name: "浪潮云",
              value: 288345,
              unit: "台",
            },
            {
              key: "新华三云",
              name: "新华三云",
              value: 288345,
              unit: "台",
            },
            {
              key: "曙光云",
              name: "曙光云",
              value: 288345,
              unit: "台",
            },
          ],
        },
      },
      data_3: {
        totalMoney: 0,
        xh3Money: 0,
        lcMoney: 0,
        sgMoney: 0,
        totalWork: 0,
        todayNew: 0,
        todayEnd: 0,
        todoWork: 0,
      },
      data_4: [
        {
          value: 0,
          time: "",
        },
      ],
      data_5: {
        date: "",
        score: 100,
        eventA: 0,
        eventB: 0,
        eventC: 0,
      },
      data_6: {},
    };
  },

  mounted() {
    this.getData();
  },

  methods: {
    getData() {
      getAdminHomeDataPart1().then((res) => {
        if (res.code === 200) {
          const { data } = res;
          this.data_1Format(data.part1Xc, data.part1);
        }
      });
      getAdminHomeDataPart2().then((res) => {
        if (res.code === 200) {
          const { data } = res;
          this.data_2Format(data.part2Xc, data.part2);
        }
      });
      getAdminHomeDataPart3().then((res) => {
        if (res.code === 200) {
          const { data } = res;
          this.data_4Format(data.part3);
          this.data_5Format(data.part3);
        }
      });
      getAdminHomeDataPart4().then((res) => {
        if (res.code === 200) {
          const { data } = res;
          this.data_6Format(data.part4Xc, data.part4);
        }
      });
      getAdminHomeDataPart5().then((res) => {
        if (res.code === 200) {
          const { data } = res;
          this.data_3Format(data.part5);
        }
      });
    },
    data_1Format(d, excd) {
      this.data_1 = [
        {
          title: "信创云服务器数",
          value: d.ecs,
          num: d.ecsUp,
          unit: "台",
          img: "/img/adminHome-icon_1.svg",
        },
        {
          title: "信创高性能服务器",
          value: d.phy,
          num: d.phyUp,
          unit: "台",
          img: "/img/adminHome-icon_2.svg",
        },
        {
          title: "信创存储",
          value: d.disk,
          num: d.diskUp,
          unit: "TB",
          img: "/img/adminHome-icon_3.svg",
        },
        {
          title: "信创数据库",
          value: d.db,
          num: d.dbUp,
          unit: "套",
          img: "/img/adminHome-icon_4.svg",
        },
        {
          title: "信创PaaS容器服务",
          value: d.pass,
          num: d.passUp,
          unit: "个",
          img: "/img/adminHome-icon_5.svg",
        },
        {
          title: "非信创云服务器数",
          value: excd.ecs,
          num: excd.ecsUp,
          unit: "台",
          img: "/img/adminHome-icon_1.svg",
        },
        {
          title: "非信创高性能服务器",
          value: excd.phy,
          num: excd.phyUp,
          unit: "台",
          img: "/img/adminHome-icon_2.svg",
        },
        {
          title: "非信创存储",
          value: excd.disk,
          num: excd.diskUp,
          unit: "TB",
          img: "/img/adminHome-icon_3.svg",
        },
        {
          title: "非信创数据库",
          value: excd.db,
          num: excd.dbUp,
          unit: "套",
          img: "/img/adminHome-icon_4.svg",
        },
        {
          title: "非信创PaaS容器服务",
          value: excd.pass,
          num: excd.passUp,
          unit: "个",
          img: "/img/adminHome-icon_5.svg",
        },
      ];
    },
    data_2Format(d, excd) {
      this.data_2 = {
        ecsRing: {
          xc: d.ecsRing.map((e) => ({ ...e, unit: "台" })),
          exc: excd.ecsRing.map((e) => ({ ...e, unit: "台" })),
        },
        diskRing: {
          xc: d.diskRing.map((e) => ({ ...e, unit: "TB" })),
          exc: excd.diskRing.map((e) => ({ ...e, unit: "TB" })),
        },
        netRing: {
          xc: d.netRing.map((e) => ({ ...e, unit: "个" })),
          exc: excd.netRing.map((e) => ({ ...e, unit: "个" })),
        },
        dbRing: {
          xc: d.dbRing.map((e) => ({ ...e, unit: "套" })),
          exc: excd.dbRing.map((e) => ({ ...e, unit: "套" })),
        },
      };
    },
    data_3Format(d) {
      const xh3Money = this.moneyFormat(d.moneyList, "新华三云");
      const lcMoney = this.moneyFormat(d.moneyList, "浪潮云");
      const sgMoney = this.moneyFormat(d.moneyList, "曙光云");
      const totalMoney = xh3Money + lcMoney + sgMoney;
      this.data_3 = {
        exspence: [
          {
            name: "新华三云",
            value: xh3Money,
          },
          {
            name: "浪潮云",
            value: lcMoney,
          },
          {
            name: "曙光云",
            value: sgMoney,
          },
        ],
        totalMoney,
        xh3Money,
        lcMoney,
        sgMoney,
        totalWork: d.totalWork,
        todayNew: d.todayNew,
        todayEnd: d.todayEnd,
        todoWork: d.todoWork,
      };
    },
    moneyFormat(list, name) {
      const n = list.find((e) => e.key === name).value;
      return Number((n / 10000).toFixed(2));
    },
    data_4Format(d) {
      this.data_4 = d.trendValues.map((v, i) => ({
        time: d.trends[i],
        value: v,
        unit: "%",
      }));
    },
    data_5Format(d) {
      this.data_5 = {
        date: d.date,
        score: d.score,
        eventA: d.eventA,
        eventB: d.eventB,
        eventC: d.eventC,
      };
    },
    data_6Format(d, excd) {
      this.data_6 = {
        cpu: {
          title: "CPU状况",
          xc: [
            {
              name: "CPU核心数",
              value: d.cpuTotal,
            },
            {
              name: "空闲CPU核心数",
              value: d.cpuSleep,
            },
            {
              name: "正常CPU核心数",
              value: d.cpuNormal,
            },
            {
              name: "超负荷CPU核心数",
              value: d.cpuOverload,
            },
          ],
          excd: [
            {
              name: "CPU核心数",
              value: excd.cpuTotal,
            },
            {
              name: "空闲CPU核心数",
              value: excd.cpuSleep,
            },
            {
              name: "正常CPU核心数",
              value: excd.cpuNormal,
            },
            {
              name: "超负荷CPU核心数",
              value: excd.cpuOverload,
            },
          ],
        },
        disk: {
          title: "存储资源状况",
          xc: [
            {
              name: "存储业务总量",
              value: d.diskTotal,
            },
            {
              name: "空闲存储业务量",
              value: d.diskSleep,
            },
            {
              name: "正常存储业务量",
              value: d.diskNormal,
            },
            {
              name: "超负荷存储业务量",
              value: d.diskOverload,
            },
          ],
          excd: [
            {
              name: "存储业务总量",
              value: excd.diskTotal,
            },
            {
              name: "空闲存储业务量",
              value: excd.diskSleep,
            },
            {
              name: "正常存储业务量",
              value: excd.diskNormal,
            },
            {
              name: "超负荷存储业务量",
              value: excd.diskOverload,
            },
          ],
        },
        net: {
          title: "网络状况",
          xc: [
            {
              name: "网络业务总量",
              value: d.netTotal,
            },
            {
              name: "空闲网络业务量",
              value: d.netSleep,
            },
            {
              name: "正常网络业务量",
              value: d.netNormal,
            },
            {
              name: "超负荷网络业务量",
              value: d.netOverload,
            },
          ],
          excd: [
            {
              name: "网络业务总量",
              value: excd.netTotal,
            },
            {
              name: "空闲网络业务量",
              value: excd.netSleep,
            },
            {
              name: "正常网络业务量",
              value: excd.netNormal,
            },
            {
              name: "超负荷网络业务量",
              value: excd.netOverload,
            },
          ],
        },
        io: {
          title: "磁盘IO状况",
          xc: [
            {
              name: "磁盘总数",
              value: d.ioTotal,
            },
            {
              name: "空闲磁盘",
              value: d.ioSleep,
            },
            {
              name: "正常磁盘",
              value: d.ioNormal,
            },
            {
              name: "超负荷磁盘",
              value: d.ioOverload,
            },
          ],
          excd: [
            {
              name: "磁盘总数",
              value: excd.ioTotal,
            },
            {
              name: "空闲磁盘",
              value: excd.ioSleep,
            },
            {
              name: "正常磁盘",
              value: excd.ioNormal,
            },
            {
              name: "超负荷磁盘",
              value: excd.ioOverload,
            },
          ],
        },
      };
    },
  },
};
</script>

<style lang="less" scoped>
.adminHome-container {
  width: 100%;
  background-color: #e8ecf0;
}

.content {
  width: 1400px;
  min-height: calc(100vh - 70px);
  margin: 0 auto;
  padding: 20px 40px;
}

.w-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}

/deep/.c-title {
  font-size: 16px;
  font-weight: 700;

  &::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 14px;
    margin-right: 10px;
    background-color: #409eff;
  }
}

.top-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.w2 {
  width: 50%;
  margin: 10px 0 15px;
  padding: 20px 10px;
  border-radius: 2px;
  background-color: #fff;

  & + .w2 {
    margin-left: 10px;
  }

  > .box {
    margin-bottom: 20px;

    &:nth-child(2) {
      padding-top: 20px;
      border-top: 0.5px solid #eee;
    }
  }

  .data-box {
    padding: 20px 40px;

    > div {
      min-width: 100px;
    }
    span {
      margin-top: 10px;
    }
  }

  &.safety {
    .s-content {
      height: 100%;
      padding-bottom: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      > div {
        height: 180px;
        justify-content: center;

        &:first-child > span {
          display: inline-block;
          width: 100%;
        }
      }
    }

    .s-box {
      border-left: 0.5px solid #eee;
      padding: 0 40px;

      .dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: rgba(217, 0, 27, 0.745098039215686);
      }

      .num {
        font-size: 60px;
        color: rgba(217, 0, 27, 0.745098039215686);
      }

      &.yellow {
        .dot {
          background-color: rgba(245, 154, 35, 0.749019607843137);
        }
        .num {
          color: rgba(245, 154, 35, 0.749019607843137);
        }
      }
      &.green {
        .dot {
          background-color: rgba(112, 182, 3, 0.749019607843137);
        }
        .num {
          color: rgba(112, 182, 3, 0.749019607843137);
        }
      }
    }
  }
}

/deep/.charts {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  > div {
    padding: 10px 20px 0;

    &:first-child,
    &:nth-child(3) {
      border-right: 0.5px solid #eee;
    }
    &:nth-child(3),
    &:nth-child(4) {
      border-top: 0.5px solid #eee;
    }
  }
}
</style>
<style lang="less" scoped>
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/deep/.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.f-green {
  color: rgba(112, 182, 3, 0.749019607843137);
}

.f-red {
  color: rgba(217, 0, 27, 0.74509804);
}

.f-yellow {
  color: rgba(245, 154, 35, 0.74901961);
}

.f-gray {
  color: #909399;
}

.f-16 {
  font-size: 16px;
}

.f-18 {
  font-size: 18px;
}

.f-20 {
  font-size: 20px;
}

.f-24 {
  font-size: 24px;
}

.blod {
  font-weight: 700;
}
</style>
